<template>
	<view class="material-class">
		<!-- 头部信息--店铺套餐的基本简介 -->
		<view class="material-class-header flex">
			<DistributionMaterial :skelettSize="1" class="width-100" :isSkelett="isSkelett" :isFooter="false" :list="singleMaterialList" />
		</view>
		<!-- 店铺的素材分类类别 -->
		<view class="material-class-content" v-if="classList.length">
			<view class="class-item flex row-between" @click="toDownLoad(index)" v-for="(item, index) in classList" :key="item.typeId">
				<view class="left-info flex col-center">
					<view class="folder-icon"><image src="/static/icon/icon_sc_pic@3x.png" /></view>
					<text>{{ item.typeName || '' }}</text>
				</view>
				<view class="right-info flex col-center">
					<text>{{ item.count || 0 }}</text>
					<view class="to-right"><image src="/static/icon/icon_order_right@2x.png" /></view>
				</view>
			</view>
		</view>
		<view class="empty-wapper" v-else>
			<image :src="emptyImage" />
		</view>
	</view>
</template>

<script>
import { materialTypeList } from '@/api/newMaterial';
import { getSingleProductDetail } from '@/api/material';
import { formatCommissionsModel } from '@/utils/common';
import { defaultImageUrl } from '@/utils';
import DistributionMaterial from '@/components/distributionMaterial';
const defaultPrefix = `${defaultImageUrl}image/`;

export default {
	name: 'MaterialClass',
	components: {
		DistributionMaterial
	},
	data() {
		return {
			classList: [],
			productId: 0,
			productInfo: {},
			isSkelett: true,
			singleMaterialList: [],
			emptyImage: `${defaultPrefix}img_nocontent.png`
		};
	},
	onLoad(options = {}) {
		const { id = '' } = options;
		console.log(id);
		this.productId = id;
		// 数据 119465
		this.getProductDetail(id);
		this.getClassList(id);
		// todo 接口顺序一致，若有时间，可将对应id带到下载页匹配
	},
	methods: {
		getProductDetail(param = '') {
			getSingleProductDetail({ productId: param || this.productId }).then((res) => {
				const { code, data } = res || {};
				console.log(res);
				if (code !== 200) {
					return;
				}
				const { commission, productName, productConfig, ...otherParams } = data;

				this.singleMaterialList = [
					{
						id: param || this.productId,
						...otherParams,
						productTitle: productName,
						commissionsList: formatCommissionsModel(commission)
					}
				];
				this.isSkelett = false;
			});
		},
		getClassList(param) {
			uni.showLoading({
				title: '加载中…',
				mask: true
			});
			materialTypeList({ productId: param || this.productId })
				.then((res = {}) => {
					const { code = 0, data = [] } = res;
					if (code !== 200) {
						uni.showToast({
							icon: 'none',
							title: '数据错误'
						});
						return;
					}
					this.classList = data;
					console.log(res);
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 去下载页
		toDownLoad(index = 0) {
			const { productId } = this;
			if (!productId) {
				uni.showToast({
					icon: 'none',
					title: '产品ID不存在'
				});
				return;
			}
			uni.navigateTo({
				url: `/newMaterialPages/materialDownLoad?productId=${this.productId}&index=${index}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.material-class {
	width: 100%;
	height: 100vh;
	overflow-y: scroll;
	overflow-x: hidden;
	background: #ffffff;
	&-header {
		padding: 20rpx 28rpx 32rpx;
		box-shadow: inset 0px -1px 0px 0px rgba(238, 238, 238, 0.5);
		.shop-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
			overflow: hidden;
			flex-shrink: 1;
			margin-right: 20rpx;
		}
		.shop-info {
			width: calc(100% - 320rpx);
			.product-name {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				text-decoration: underline;
				margin-bottom: 24rpx;
			}
			.tags-box {
				flex-wrap: wrap;
			}
			.tag-item {
				flex-shrink: 1;
				font-size: 24rpx;
				font-weight: bold;
				color: #ff6b11;
				background: #fff0e7;
				border-radius: 12rpx;
				padding: 12rpx;
				margin-right: 8rpx;
			}
		}
		.shop-price {
			width: 140rpx;
			flex-shrink: 1;
			text-align: right;
			.now-price {
				font-size: 40rpx;
				font-weight: bold;
				font-family: font-number;
				color: #f55f4e;
				margin-bottom: 6prx;
				.font-12 {
					font-size: 24rpx;
				}
			}
			.origin-price {
				font-size: 20rpx;
				color: #999999;
				text-decoration: line-through;
			}
		}
	}
	&-content {
		padding: 24rpx 20rpx;
		.class-item {
			background: #f8f8f8;
			border-radius: 24rpx;
			padding: 32rpx;
			margin-bottom: 20rpx;
			.left-info {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				.folder-icon {
					width: 56rpx;
					height: 56rpx;
					margin-right: 8rpx;
				}
			}
			.right-info {
				font-size: 28rpx;
				color: #666666;
				.to-right {
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
					image {
						display: inline;
					}
				}
			}
		}
	}
}
.empty-wapper {
	width: 480rpx;
	height: 320rpx;
	margin: 240rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
image {
	width: 100%;
	height: 100%;
	// display: block;
}
.width-100 {
	width: 100%;
}
</style>
